<template>
    <div class="popover">
        <div class="popContent">
            <div class="contentTop">
                选择月份
            </div>
            <div class="monthChoice">
                <div class="years">
                    <button @click="yearAdd">+</button>
                    <p>{{year1}}</p>
                    <button @click="yearJian">-</button>
                    <!-- <li v-for="(item,index) in yearList" :key="index">
                        {{item}}
                    </li> -->
                </div>
                <div class="months">
                    <button @click="monthAdd">+</button>
                    <p>{{month1}}</p>
                    <button @click="monthJian">-</button>
                    <!-- <li v-for="(item,index) in monthList" :key="index">{{item}}</li> -->
                </div>
            </div>
            <div class="noneButton">
                <span style="background:#72B9FF" @click="cancle">取消</span>
                <span style="background:#55AAFF" @click="sure">确定</span>
            </div>
            
        </div>
        
    </div>
</template>
<script>

    export default {
        name: "topBar",
        components:{
            
        },
        data() {
            return {
                month:'',
                year:''
            };
        },
        props:['title','month1','year1'],
        methods:{
            yearAdd:function(){
                this.year++;
                this.$emit('year',this.year);
            },
            yearJian:function(){
                this.year--;
                
                if(this.year<=2018){
                    this.year=2018
                }
                this.$emit('year',this.year);
            },
            monthAdd:function(){
                this.month++;
                
                if(this.month>=12){
                    this.month=12
                }
                this.$emit('month',this.month);
            },
            monthJian:function(){
                this.month--;   
                if(this.month<1){
                    this.month=1;
                }
                this.$emit('month',this.month);
            },
            cancle:function(){
                this.$emit('isPop',false);
            },
            sure:function(){
                this.$emit('isPop1',false);

            }
        },
        created(){
        
        },
        mounted(){
            this.month=this.month1;
            this.year=this.year1;
            // this.month=(new Date).getMonth()+1;
            // this.year=(new Date).getFullYear();
        }
    }
</script>
<style scoped lang="scss">
  .popover{
            button{
                border:none;
                outline: none;
            }
            position:fixed;
            top:0px;
            left:0px;
            height:100vh;
            width:100vw;
            background:rgba(0,0,0,.3);
            .popContent{
                position: relative;
                width:280px;
                height:280px;
                margin:0 auto;
                margin-top:200px;
                background:#ffffff;
                text-align: center;
                border-radius: 10px;
                overflow: hidden;
                .monthChoice{
                    padding-top: 37px;
                    
                    button{
                        font-size: 20px;
                        background: #ffffff;
                        border: 1px solid #55AAFF;
                        outline: none;
                        width: 80px;
                        border-radius: 100px;
                        color:#55AAFF;
                        line-height: 28px
                    }
                    p{
                        font-size:24px;
                        line-height: 2em;
                    }
                }
                .contentTop{
                    line-height:45px;
                    text-align: center;
                    background: #55AAFF;
                    color: #ffffff;
                    font-size: 15px;
                }
                
                .monthChoice{
                    display: flex;
                    justify-content: space-around;
                    ul{
                        width: 45%;
                        li{

                        }
                    }
                }
                
            }
        }
        .noneButton{
            position: absolute;
            bottom: 0px;
            width:100%;
            display: flex;
            span{
                display: inline-block;
                width:50%;
                color:#ffffff;
                font-size:18px;
                line-height: 45px;
            }
        }
</style>

